<template>
    <!--门牌号筛选组件-->
    <div @click="handClick">
        <span style="float: left">{{ leftText }}</span>
        <span class="right_T">
            {{ nowSelectName == "" ? $t("text.Common.l30") : nowSelectName }}
            <img src="../../assets/images/upRow.svg" />
        </span>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>

    <div class="popup" v-if="show">
        <!--数据列表-->
        <div class="item_name">
            <table>
                <tr>
                    <td>
                        <input :placeholder="$t('text.PageData.l240')" class="searchInput" @input="formatInput(1)" v-model="selectList.building_EQ" />
                    </td>
                    <td>
                        <div class="rt">{{ $t("text.PageData.l213") }}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input :placeholder="$t('text.PageData.l241')" class="searchInput" v-model="selectList.unit_EQ" @input="formatInput(2)" />
                    </td>
                    <td>
                        <div class="rt">{{ $t("text.PageData.l219") }}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input :placeholder="$t('text.PageData.l242')" class="searchInput" @input="formatInput(3)" v-model="selectList.roomIdentifier_EQ" />
                    </td>
                    <td>
                        <div class="rt">{{ $t("text.PageData.l222") }}</div>
                    </td>
                </tr>
                <tr>
                   <div class="errorHit"> {{errorHit}}</div>
                </tr>
            </table>
        </div>

        <div class="b1" style="justify-content: space-between">
            <el-button style="width: 70px;height: 25px;color: #6698ff;border-color: #6698ff;font-size: 12px;" plain @click="noLimit">
                {{ $t("text.Common.l30") }}
            </el-button>
            <el-button type="primary" style="font-size: 12px; width: 70px; height: 25px" @click="confirm">{{ $t("text.Common.l31") }}</el-button>
        </div>
    </div>
</template>
  
<script >
export default {
    name: "RadioSelectPlate",
    emits: ["returnData", "clearData"],
    props: {
        default: {
            default: "",
            type: String,
        },
        isReset: Boolean,
    },
    components: {},
    data() {
        return {
            leftText: this.$t("text.PageData.l243"),
            show: false,
            nowSelectName: this.default,
            selectList: {
                building_EQ: "",
                unit_EQ: "",
                roomIdentifier_EQ: "",
            },
            errorHit: "",
        }
    },
    mounted() {},
    methods: {
        handClick() {
            this.show = !this.show
        },
        noLimit() {
            this.nowSelectName = ""
            this.selectList = {
                building_EQ: "",
                unit_EQ: "",
                roomIdentifier_EQ: "",
            }
            this.$emit("clearData", this.selectList)
            this.show = !this.show
        },
        confirm() {
            let temps = { building_EQ: "", unit_EQ: "", roomIdentifier_EQ: "" }
            this.$emit("clearData", temps)
            //页面展示，字符拼接
            this.nowSelectName = ""
            if (this.selectList.building_EQ != "")
                this.nowSelectName = this.nowSelectName + this.selectList.building_EQ + this.$t("text.PageData.l14")

            if (this.selectList.building_EQ != "" && (this.selectList.unit_EQ != "" || this.selectList.roomIdentifier_EQ != ""))
                this.nowSelectName = this.nowSelectName + "-"

            if (this.selectList.unit_EQ != "")
                this.nowSelectName = this.nowSelectName + this.selectList.unit_EQ + this.$t("text.PageData.l219")

            if (this.selectList.unit_EQ != "" && this.selectList.roomIdentifier_EQ != "")
                this.nowSelectName = this.nowSelectName + "-"
            this.nowSelectName = this.nowSelectName + this.selectList.roomIdentifier_EQ

            //判断是否为全空，全空就不返回
            if (this.selectList.building_EQ != "" || this.selectList.unit_EQ != "" || this.selectList.roomIdentifier_EQ != "") {
                //去除空的字段进行返回
                const result = Object.keys(this.selectList).reduce((acc, key) => {
                    if (this.selectList[key] !== "") {
                        if (key == "building_EQ") acc[key] = this.selectList[key] + this.$t("text.PageData.l14")
                        else if (key == "unit_EQ") acc[key] = this.selectList[key] + this.$t("text.PageData.l219")
                        else acc[key] = this.selectList[key]
                    }
                    return acc
                }, {})
                this.$emit("returnData", result)
            }
            this.show = !this.show
        },
        formatInput(index) {
            if(this.errorHit!=""){
                this.errorHit=""
            }
            const checkInput = (val) => {
                if (/[\u4e00-\u9fa5]/.test(val)) {
                    val = val.replace(/[\u4e00-\u9fa5]/g, "")
                    this.errorHit = this.$t("text.Common.l61")
                }
                if (val.length > 10) {
                    val = val.substring(0, 10)
                    this.errorHit = this.$t("text.Common.l62")
                }
                return val
            }

            switch (index) {
                case 1:
                    this.selectList.building_EQ = checkInput(this.selectList.building_EQ)
                    break
                case 2:
                    this.selectList.unit_EQ = checkInput(this.selectList.unit_EQ)
                    break
                case 3:
                    this.selectList.roomIdentifier_EQ = checkInput(this.selectList.roomIdentifier_EQ)
                    break
            }
        },
    },
    watch: {
        isReset: {
            handler() {
                this.nowSelectName = this.selectList[0].dictName
            },
        },
        selectList() {},
    },
    computed: {},
}
</script>

<style scoped>
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 13px;
    margin-top: 20px;
    margin-left: 25px;
    min-width: 225px;
    max-height: 275px;
    overflow: auto;
}

.right_T {
    float: right;
    color: black;
    display: flex;
    align-items: center;
}

img {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-left: 5px;
}

.item_name {
    text-align: left;
    padding: 3px 10px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.searchInput {
    width: 80%;
    outline: none;
    height: 20px;
    padding-left: 8px;
    padding-right: 25px;
    border-radius: 5px;
    font-size: 12px;
    background: rgb(242, 242, 242);
    border: none;
    margin: 3px 1px;
}

.rt {
    padding-left: 15px;
    white-space: nowrap;
}

.b1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 6px;
    border-top: 1px solid #ddd;
    padding-top: 6px;
}

.errorHit {
    color:#b8b8b8;
    font-size: 12px;
    padding-left: 5px;
    width: 200%;
}
</style>
  